<template>
  <!-- <el-tabs v-model="activeName"  @tab-click="handleClick">
    <el-tab-pane label="推荐" name="first"></el-tab-pane>
    <el-tab-pane label="排行榜" name="second"></el-tab-pane>
    <el-tab-pane label="歌单" name="third"></el-tab-pane>
    <el-tab-pane label="主播电台" name="fourth"></el-tab-pane>
     <el-tab-pane label="歌手" name="fifth"></el-tab-pane>
      <el-tab-pane label="新碟上架" name="sixth"></el-tab-pane> -->

  <!-- </el-tabs> -->
  <div class="indexNavOut">
<div class="indexNav">
<ul class="navLi">
<!-- <li style="width: 130px;"><a href="#">推荐</a></li> -->
<li @click="checkNav()" v-bind:class="{'active':Index=='#/discover'}"><router-link to="/discover">推荐</router-link></li>
<li @click="checkNav()" v-bind:class="{'active':Index=='#/discover/toplist/biaosheng'}"><router-link to="/discover/toplist/biaosheng">排行榜</router-link></li>
<li @click="checkNav()" v-bind:class="{'active':Index=='#/discover/playlist?cat=华语'}"><router-link to="/discover/playlist?cat=华语">歌单</router-link></li>
<li @click="checkNav()" v-bind:class="{'active':Index=='#/discover/djradio'}"><router-link to="/discover/djradio">主播电台</router-link></li>
<li @click="checkNav()" v-bind:class="{'active':Index=='#/discover/artist'}"><router-link to="/discover/artist/cat?id=1001">歌手</router-link></li>
<li @click="checkNav()" v-bind:class="{'active':Index=='#/discover/album'}"><router-link to="/discover/album">新碟上架</router-link></li>


</ul>
</div>
</div>
</template>
<script>
  export default {
      name:'daohan',
      data() {
      return {
        // activeName: 'first',
        //  link:'/ccc',
         Index: document.location.hash,
      };
    },
    methods: {
      // handleClick() {
      //   this.$router.push(this.link)
      // },
      checkNav (index) {
this.Index = document.location.hash;
},
    }
  };
</script>
<style>
   /* .el-tabs {
        width: 470px;
        height: 38px;
        display: flex;
        margin-left: 550px;
     
   }
   .el-tab-pane {

        flex: 1;

   } */
   .indexNavOut{
background-color: rgb(194, 12, 12);
height: 34px;
width: 100%;

}
.indexNav{
  width:35%;
margin: 0 auto;
}
.navLi{
display: flex;
height: 34px;
}

.navLi li{
flex: 1;

}
.navLi li a{
text-decoration: none;
color: #fff;
font-size: 8px;
}
.indexNav .icon{
width: 230px;
margin-top: 10px;
}
.indexNav .icon img{
width: 100%;
}

.navLi li {
height: 100%;
line-height: 34px;
position: relative;

}
.navLi li.active{
background-color: rgb(15,36,115);
}

.navLi li:last-child:after{
border-right: none;
}
</style>